<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:t="http://myfaces.apache.org/tomahawk"
		xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

	<ui:composition template="/WEB-INF/templates/template.xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

      <h:outputScript name="js/jquery.maskedinput-1.2.2.js" />
         <h:outputScript name="js/jquery.js" />
          <h:outputScript name="js/jquery.meio.mask.js" />
            <h:outputScript name="js/jquery.maskMoney.js" />

</head>
	
	<ui:define name="content">
		<h:form id="cadastroCliente" styleClass="form">
			<a4j:outputPanel id="panelCliente" ajaxRendered="true">
				<div class="grid-6-12">
					<h:messages id="mensagens" />
				</div>
				<div class="field-clear"></div>
				<div class="grid-6-12">
					<h:outputLabel class="form-lbl"  value="Nome"/>
					<h:inputText id="nomeCliente" styleClass="form-txt" value="#{clienteBean.cliente.nome}" ></h:inputText>
				</div>
				<div class="grid-3-12" >
				<t:fieldset legend="Pessoa">
					 <h:selectOneRadio required="true" requiredMessage="Favor informar o campo Pessoa." value="#{clienteBean.cliente.tipoCliente}" > 
						<f:selectItem id="cpf" itemLabel="Física" itemValue="1" />
  						<f:selectItem id="cnpf" itemLabel="Jurídica" itemValue="2" />
  						<a4j:ajax limitRender="true"  event="valueChange" render="panelGroupTipoCliente"  />
					</h:selectOneRadio>
				</t:fieldset>
				</div>
				
				<h:panelGroup id="panelGroupTipoCliente">
					<a4j:outputPanel id="outpanelCpf" rendered="#{clienteBean.cliente.tipoCliente  eq '1'}">
						<div class="grid-3-12" >
							<h:outputLabel class="form-lbl" value="CPF"/>
							<h:inputText id="cpfCliente"  required="true" requiredMessage="Favor informar o CPF." styleClass="form-txt" value="#{clienteBean.cliente.cpf}" ></h:inputText>
						</div>
					</a4j:outputPanel>	
					
					<a4j:outputPanel id="outpanelCnpj" rendered="#{clienteBean.cliente.tipoCliente eq '2'}">
						<div class="grid-3-12">
							<h:outputLabel class="form-lbl" value="CNPJ"></h:outputLabel>
							<h:inputText id="cnpfCliente" required="true" requiredMessage="Favor informar o CNPJ." styleClass="form-txt" value="#{clienteBean.cliente.cnpj}" onfocus="applyMask(this)" >
							 <rich:jQuery selector="#cnpfCliente" query="mask('999.999.999/9999-99')" />
							</h:inputText>
						</div>
					</a4j:outputPanel>				
				</h:panelGroup>
				<div class="field-clear"></div>
				
				<div class="grid-3-12">
						<h:outputLabel class="form-lbl" value="CEP"></h:outputLabel>
						<h:inputText  id="cepCliente" styleClass="form-txt" value="#{clienteBean.endereco.cep}" ></h:inputText>
				</div>
				
				<div class="grid-6-12">
						<h:outputLabel class="form-lbl" value="Logradouro"></h:outputLabel>
						<h:inputText  id="logradouroCliente" styleClass="form-txt" value="#{clienteBean.endereco.logradouro}" ></h:inputText>
				</div>
				
				<div class="grid-2-12">
						<h:outputLabel class="form-lbl" value="Número"></h:outputLabel>
						<h:inputText  id="numeroCliente" styleClass="form-txt" value="#{clienteBean.endereco.numero}" ></h:inputText>
				</div>
				
				<div class="field-clear"></div>
				
				<div class="grid-6-12">
						<h:outputLabel class="form-lbl" value="Bairro"></h:outputLabel>
						<h:inputText  id="bairroCliente" styleClass="form-txt" value="#{clienteBean.endereco.bairro}" ></h:inputText>
				</div>
				
				<div class="grid-6-12">
						<h:outputLabel class="form-lbl" value="Cidade"></h:outputLabel>
						<h:inputText  id="cidadeCliente" styleClass="form-txt" value="#{clienteBean.endereco.cidade}" ></h:inputText>
				</div>
				
				<div class="grid-6-12">
					<div class="grid-5-12">
						<h:outputLabel class="form-lbl"  value="UF"></h:outputLabel>
							<h:selectOneMenu id="comboBoxUfs"  value="#{clienteBean.uf}" >
								<f:selectItem itemLabel="Selecione" itemValue=""/>
								<f:selectItems value="#{clienteBean.listaUfs}" />
							</h:selectOneMenu>
					</div>
				</div>
				
				
				<div class="field-clear"></div>
				
				<a4j:region>
					<div class="grid-4-12">
						<h:outputLabel class="form-lbl"  value="Tipo Contato"></h:outputLabel>
							<h:selectOneMenu id="comboBoxTipoContato"  value="#{clienteBean.tipoContato}" >
								<f:selectItem itemLabel="Selecione" itemValue=""/>
								<f:selectItems value="#{clienteBean.listTipoContato}" var="contatos" itemLabel="#{contatos.descricao}" itemValue="#{contatos.codigo}" />
							</h:selectOneMenu>
					</div>
					<div class="grid-3-12">
						<h:outputLabel class="form-lbl" value="Contato"></h:outputLabel>
						<h:inputText  id="contatoCliente" styleClass="form-txt" value="#{clienteBean.contatoCliente.contato}" ></h:inputText>
					</div>
					<div class="grid-2-12" style="padding-top: 22px">
						<a4j:commandButton limitRender="true" style="width: 50px; height: 20px" render="panelClientes,mensagens,panelGroupContatos" value="Adicioar" action="#{clienteBean.addContato}" />
					</div>
				</a4j:region>
			</a4j:outputPanel>
			
			<div class="field-clear"></div>

			<div style="border-top: 1px solid #d0d0d0; margin-top: 12px; padding-top: 12px">
				<h:panelGroup id="panelGroupContatos" >
					<rich:dataTable style="width: 300px" id="idTableContato"
						var="contato" value="#{clienteBean.listContatos}">
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Tipo Contato" />
							</f:facet>
							<h:outputText value="#{contato.descricaoTipoContato}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Contato" />
							</f:facet>
							<h:outputText value="#{contato.contato}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Remover" />
							</f:facet>
							<a4j:commandLink immediate="true" value="Excluir" render="idTableContato" action="#{clienteBean.removerContato}" >
								 <f:setPropertyActionListener target="#{clienteBean.contatoCliente}" value="#{contato}"/> 
							</a4j:commandLink>
						</rich:column>
					</rich:dataTable>
				</h:panelGroup>
			</div>

			<div class="field-clear"></div>
			<div class="grid-2-12">
				<a4j:commandButton styleClass="form-button" render="clienteTable,panelGroupContatos" value="Salvar" action="#{clienteBean.salvarCliente}" />
			</div>				
	</h:form>
		
		<div style="border-top: 1px solid #d0d0d0; margin-top: 12px; padding-top: 12px">
		
		<h:form id="formListCliente" >
				 <rich:dataTable style="width: 300px" id="clienteTable"  var="cliente" value="#{clienteBean.clientes}" >
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="ID" />
						</f:facet>
						<h:outputText value="#{cliente.id}" />
					</rich:column>
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="Nome" />
						</f:facet>
						<h:outputText value="#{cliente.nome}" />
					</rich:column>
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="CPF" />
						</f:facet>
						<h:outputText value="#{cliente.cpf}" />
					</rich:column>
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="CNPJ" />
						</f:facet>
						<h:outputText value="#{cliente.cnpj}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Remover" />
						</f:facet>
							<a4j:commandLink value="Excluir" action="#{clienteBean.excluir}" render="clienteTable,panelClientes"  >
								 <f:setPropertyActionListener target="#{clienteBean.idCliente}" value="#{cliente.id}"/>  
							</a4j:commandLink>
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Remover" />
						</f:facet>
							<a4j:commandLink render="panelGroupContatos" action="#{clienteBean.editar}" value="Editar" >
								 <f:setPropertyActionListener target="#{clienteBean.cliente}" value="#{cliente}"/>  
							</a4j:commandLink>
					</rich:column>
				</rich:dataTable>
		</h:form>
	
		<t:saveState id="saveContatos" value="#{clienteBean.listContatos}"/> 
		<t:saveState id="saveCliente" value="#{clienteBean.cliente}"/>
		<t:saveState id="saveEndereco" value="#{clienteBean.endereco}"/>  
	</div>	
		
	</ui:define>
	</ui:composition>

</html>